<template>
	<!-- 首页标题栏，轮播图整合插件 -->
	<view class="banner-swiper-wrap u-m-b-10" style="height: unset;">
		<view class="head-back"></view>
		<!-- 头部帮助 -->
		<view class="help-box">
			<view @click="topIconFun(item,index)" class="help-cell" v-for="(item,index) in top_icon" :key="index">
				<image :src="item.url" mode=""></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<!-- 标题栏 -->
		<view class="u-navbar u-navbar-fixed" style="position: unset;background-color: aqua;height: 48px;"
			:style="[navbarStyle]">
			<!-- <view class="nav-bg" :style="[navBg]"></view> -->
			<!-- <view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view> -->
			<!-- :style="[navbarInnerStyle]" -->
			<view class="u-navbar-inner">
				<!-- <view class="u-back-wrap">
					<view class="u-icon-wrap u-back-text u-line-1" :style="[navTitleStyle, navTitleColor]">
						{{ navTitle || '' }}
					</view>
				</view> -->
				<input v-model="input_va" type="text" placeholder="请输入搜索">
				<!-- <image class="input_yuyinIcon" :src="$IMG_URL+'/static/images/index_top/yuyin.png'" mode=""></image> -->
				<view class="box_btn_search" @click="toSearch">
					搜索
				</view>
				<!-- <view
					hover-class="hover-search"
					class="search-box u-flex u-row-center u-col-center u-m-r-30"
					@tap="$Router.push('/pages/public/search')"
				>
					
					<view class="u-iconfont uicon-search" :style="[navTitleColor]"></view>
				</view> -->
			</view>
		</view>
		<!-- 轮播组件 -->
		<template v-if="!flag_big">
			<swiper class="screen-swiper square-dot" @change="onChange" style="height: 520rpx" :indicator-dots="true"
				:circular="true" :autoplay="false" interval="5000" duration="500">
				<swiper-item v-for="(item, index) in list" :key="index" @tap="onSwiper(index)">
					<image :src="item.image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</template>
		<template v-else>
			<!-- class="screen-swiper square-dot" -->
			<!-- style="height: 520rpx" -->
			<!-- :indicator-dots="true" -->
			<swiper class="screen-swiper square-dot" style="height: 150px;min-height: unset;" @change="onChange" :indicator-dots="true"
				:circular="true" :autoplay="false" interval="5000" duration="500">

				<swiper-item v-for="(item, index) in list" :key="index" @tap="onSwiper(index)">
					<image style="width: 92%;margin: 0 auto;display: block;border-radius: 5px;" :src="item.image"
						mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</template>
		<u-popup v-model="showHomeList" mode="top" border-radius="14">
			<view class="homeListBox" style="padding-top: 25px;">
				<view class="cell-row-item" v-for="(it,index) in hasList" :key="index"
					@click="callHome(it.user.mobile)">
					<view class="left-icon">
						<image :src="it.user.avatar" mode=""></image>
					</view>
					<view class="min-content">
						<view class="con-top">
							<text class="row-user">{{it.name}}</text>
							<text class="sf-row">家属</text>
							<!-- <text class="row-state">{{it.status==0?'等待绑定':it.status==2?'已被拒绝':''}}</text> -->
						</view>
						<view class="user-phone">{{it.user.mobile}}</view>
					</view>
					<view class="row-edit" @click="callHome(it.user.mobile)">
						拨打
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <u-button @click="show = true">打开</u-button> -->

	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	/**
	 * home-head-轮播卡片,主要为了处理数据
	 * @property {Array} list 轮播图数据，
	 * @property {String} mode 指示器模式
	 * @property {String} navTitle 项目名称
	 */
	import http from '@/shopro/request/index'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				navBgImage: '',
				changeNavBackground: false,
				swiperCur: 0,
				statusBarHeight: systemInfo.statusBarHeight,
				navBg: {
					opacity: 0
				},
				navTitleColor: {
					color: '#fff'
				},
				top_icon: [{
						url: this.$IMG_URL + '/static/images/index_top/jijiu.png',
						text: '急救手册',
						pageUrl: '/pages/index/index/saveHandText'
					},
					{
						url: this.$IMG_URL + '/static/images/index_top/120.png',
						text: '呼叫120'
					},
					{
						url: this.$IMG_URL + '/static/images/index_top/home.png',
						text: '求助家属'
					},
					{
						url: this.$IMG_URL + '/static/images/index_top/kf.png',
						text: '求助客服'
					},
				],
				input_va: '',
				BIGlist: [{
					image: this.$IMG_URL + '/static/images/BIG-index/swiper-test-img.png'
				}],
				hasList: [],
				showHomeList: false
			};
		},
		props: {
			scrollTop: {
				type: [String, Number],
				default: 0
			},
			// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// yyValue:{
			// 	type:String,
			// 	default:''
			// },

			navTitle: {
				type: String,
				default: 'Shopro商城'
			},
			navTitleStyle: {
				type: Object,
				default: () => {
					return {
						color: '#fff',
						fontSize: '38rpx'
					};
				}
			},
			homeListData: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		watch: {
			scrollTop(newValue, oldValue) {
				let top = newValue;
				this.navBg = {
					opacity: top > this.navbarHeight ? 1 : top * 0.01
				};
				this.navTitleColor = {
					color: top > this.navbarHeight ? '#000' : '#fff'
				};
				this.setStatusStyle(top > this.navbarHeight ? 'dark' : 'light');
			},
			// yyValue(newValue,oldValue){
			// 	this.input_va = newValue
			// }
		},
		computed: {
			// yydata(){
			// 	return this.input_va = this.yyValue
			// },
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				style.height = this.navbarHeight + 'px';
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				// #endif
				return style;
			},
			// 整个导航栏的样式
			navbarStyle() {
				let style = {};
				style.zIndex = this.$u.zIndex.navbar;
				style.background = 'none';
				Object.assign(style, this.background);
				return style;
			},
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 44;
				// #endif
				// #ifdef MP
				return systemInfo.platform == 'ios' ? 44 : 48;
				// #endif
			},
			// 是否为大字版
			flag_big() {
				return this.$store.state.user.isBIG
			}
		},
		created() {
			this.navBgImage = this.list[0].image;
			this.init()
			this.cpoyHomelist = this.homeListData
		},
		methods: {
			callHome(ph) {
				uni.makePhoneCall({
					phoneNumber: ph
				})
			},
			init() {
				http('user.homeList').then(res => {
					console.log(res);
					// this.waitList = res.data.auditList
					this.hasList = res.data.userFamilyList
					// this.waitList = res.data.filter(it=>{
					// 	if(it.status==0){
					// 		return it
					// 	}
					// })
					// this.hasList = res.data.filter(it=>{
					// 	if(it.status==1){
					// 		return it
					// 	}
					// })
					this.hasList = this.hasList.filter(item => {
						if (item.status == 1) {
							return item
						}
					})
				})
			},
			inputEnter(va) {
				console.log(va);
				this.input_va = va.data
				this.toSearch()
			},
			reset() {
				// this.init()
				this.showHomeList = false
			},
			toSearch() {
				if (this.input_va !== '') {
					// this.$Router.push('/pages/goods/list?keywords='+input_va)
					uni.navigateTo({
						url: '/pages/goods/list?keywords=' + this.input_va
					})
				} else {
					uni.showToast({
						title: '搜索内容不可为空',
						icon: 'none'
					})
				}

			},
			onSwiper(e) {
				// console.log(this.list);
				this.$tools.routerTo(this.list[e].path);
			},
			onChange(e) {
				this.swiperCur = e.detail.current;
			},
			setStatusStyle(status) {
				// #ifdef H5
				return false;
				// #endif
				if (status == 'light') {
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: '#000000',
						animation: {
							duration: 200,
							timingFunc: 'easeIn'
						}
					});
					// #ifdef APP-PLUS
					plus.navigator.setStatusBarStyle('light');
					// #endif
				} else {
					uni.setNavigationBarColor({
						frontColor: '#000000',
						backgroundColor: '#ffffff',
						animation: {
							duration: 200,
							timingFunc: 'easeIn'
						}
					});

					// #ifdef APP-PLUS
					plus.navigator.setStatusBarStyle('dark');
					// #endif
				}
			},
			async topIconFun(item, index) {
				console.log('点击了上层求助区' + item);
				if (item.pageUrl) {
					uni.navigateTo({
						url: item.pageUrl
					})
				} else if (index == 1 || index == 3) {
					// 获取急救及客服电话
					let phob = this.$store.state.shopro.shop
					uni.makePhoneCall({
						phoneNumber: index == 1 ? phob.aid : phob.customerPhone //仅为示例
					});

				} else {
					if (this.$store.state.user.isLogin) {
						let homeStroge = await uni.getStorageSync('homeList')
						this.cpoyHomelist = homeStroge
						this.hasList = homeStroge
						let that = this
						console.log('已登录');
						// that.showHomeList = true
						if (that.cpoyHomelist.length == 1) {
							console.log('已登录1家属');
							uni.makePhoneCall({
								phoneNumber: that.cpoyHomelist[0].user.mobile
							})
						} else if (that.cpoyHomelist.length > 1) {
							console.log('已登录多家属');
							that.showHomeList = true
						} else if (that.cpoyHomelist.length <= 0) {
							uni.showModal({
								content: '未绑定家属手机',
								confirmText: '去绑定',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										that.showHomeList = false
										uni.navigateTo({
											url: '/pages/app/homeItem'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
										that.showHomeList = false
									}
								}
							})
						}
					} else {
						console.log('未登录');
						this.$store.dispatch("showAuthModal", "accountLogin");
					}
					// uni.navigateTo({
					// 	url:'/pages/app/homeItem'
					// })
				}
			},
			searchFun() {
				console.log(this.input_va);
				$Router.push('/pages/public/search')
			}
		}
	};
</script>

<style lang="scss" scoped>
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.head-back {
		// height: 38px;
		background-color: #000;
	}

	.cell-row-item {
		background-color: #ffffff;
		padding: 22px 13px 19px;
		display: flex;
		align-items: center;
		margin-bottom: 8px;

		.left-icon {
			border-radius: 50%;
			overflow: hidden;
			background-color: #fff4f1;
			width: 50px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.min-content {
			flex: 1;
			margin-left: 15px;

			.con-top {
				display: flex;
				align-items: center;
				margin-bottom: 8px;

				.row-user {
					font-size: 20px;
					color: #000000;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.sf-row {
					white-space: nowrap;
					font-size: 12px;
					color: #ff3400;
					background-color: #fff4f1;
					border-radius: 2px;
					margin: 0 15px 0 8px;
					padding: 3px 7px;
				}

				.row-state {
					white-space: nowrap;
					font-size: 15px;
					color: #ff8300;
				}
			}

			.user-phone {
				font-size: 16px;
				color: #999;
			}
		}

		.row-edit {
			white-space: nowrap;
			font-size: 18px;
			color: #ff3400;
		}
	}

	.help-box {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 17px 17px 0;
		// padding-top: 38px;
		justify-content: space-between;

		.help-cell {
			display: flex;
			align-items: center;
			background-color: #ffecdd;
			border-radius: 13px;
			box-sizing: border-box;
			white-space: nowrap;
			padding: 6px 10px;

			text {
				color: #fc2800;
				font-size: 11px;
				font-weight: bold;
				margin-left: 4px;
			}

			image {
				max-width: 14px;
				max-height: 14px
			}
		}
	}

	// 轮播
	.banner-swiper-wrap {
		height: 520rpx;
		position: relative;
		z-index: 100;

		.search-box {
			width: 66rpx;
			height: 66rpx;
			background: rgba(#000, 0.18);
			border-radius: 100%;
		}

		.hover-search {
			background: rgba(#fff, 0.18);
		}
	}

	.u-navbar {
		width: 100%;
	}

	.u-navbar-fixed {
		position: unset;
		background: none;
		z-index: 980;
		box-sizing: border-box;
		/* padding: 5px 8px; */
		padding-left: 20px;
		display: flex;
		align-items: center;
		// border: 2px solid rgb(254,39,5);
		border: solid 2px #ff2600;
		width: 92%;
		margin: 10px auto;
		border-radius: 30px;

		.nav-bg {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 980;
			width: 100%;
			height: 100%;
			background-color: #fff;
			box-shadow: 0px 4px 6px rgba(140, 140, 140, 0.32);
		}
	}

	.u-status-bar {
		width: 100%;
	}

	.u-navbar-inner {
		@include vue-flex;
		// background-color: deepskyblue;
		justify-content: space-between;
		position: relative;
		align-items: center;
		position: relative;
		margin: 0 auto;
		width: 100%;
		height: 100%;
		z-index: 990;

		.input_yuyinIcon {
			width: 13px;
			height: 17px;
			position: absolute;
			right: 26%;
			top: 50%;
			transform: translateY(-50%);
		}

		.box_btn_search {
			background-image: linear-gradient(90deg,
					#ff8300 0%,
					#ff3d00 100%),
				linear-gradient(#ff4000,
					#ff4000);
			background-blend-mode: normal,
				normal;
			border-radius: 20px;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 13px;
			color: #fff;
			white-space: nowrap;
			padding: 0 21px;
		}
	}

	.u-back-wrap {
		@include vue-flex;
		align-items: center;
		flex: 1;
		flex-grow: 0;
		padding: 14rpx 14rpx 14rpx 24rpx;
	}
</style>